<template>
    <div class="main-wrapper log-wrap">
        <div class="row">

            <div class="col-md-6 login-bg">
                <KeepAlive>
                    <div class="owl-carousel login-slide owl-theme">
                        <div class="welcome-login">
                            <div class="login-banner">
                                <img src="assets/img/login-img.png" class="img-fluid" alt="Logo">
                            </div>
                            <div class="mentor-course text-center">
                                <h2>Welcome to <br>DreamsLMS Courses.</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt
                                    ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                            </div>
                        </div>
                        <div class="welcome-login">
                            <div class="login-banner">
                                <img src="assets/img/login-img.png" class="img-fluid" alt="Logo">
                            </div>
                            <div class="mentor-course text-center">
                                <h2>Welcome to <br>DreamsLMS Courses.</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt
                                    ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                            </div>
                        </div>
                        <div class="welcome-login">
                            <div class="login-banner">
                                <img src="assets/img/login-img.png" class="img-fluid" alt="Logo">
                            </div>
                            <div class="mentor-course text-center">
                                <h2>Welcome to <br>DreamsLMS Courses.</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt
                                    ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                            </div>
                        </div>
                    </div>
                </KeepAlive>
            </div>

            <div class="col-md-6 login-wrap-bg">

                <div class="login-wrapper">
                    <div class="loginbox">
                        <div class="w-100">
                            <div class="img-logo">
                                <img src="assets/img/logo.svg" class="img-fluid" alt="Logo">
                                <div class="back-home">
                                    <NuxtLink to="/">回到主页</NuxtLink>
                                </div>
                            </div>
                            <h1>登录您的账户-13412365478-17346566471</h1>
                            <form @submit.prevent="hLogin">
                                <div class="form-group">
                                    <label class="form-control-label">用户名</label>
                                    <input type="phone" v-model="formData.telephone" class="form-control" placeholder="请输入有效手机号">
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">账户类型</label>
                                    <div class="wallet-method wallet-radio-blk d-flex align-items-center">
                                        <label class="radio-inline custom_radio me-4">
                                            <input type="radio" v-model="formData.roleKey" value="admin" name="optradio">
                                            <span class="checkmark"></span> 管理员
                                        </label>
                                        <label class="radio-inline custom_radio me-4">
                                            <input type="radio" v-model="formData.roleKey" value="principal" name="optradio">
                                            <span class="checkmark"></span> 校长
                                        </label>
                             
                                        <label class="radio-inline custom_radio me-4">
                                            <input type="radio" v-model="formData.roleKey" value="teacher" name="optradio">
                                            <span class="checkmark"></span> 老师
                                        </label>
                                        <label class="radio-inline custom_radio me-4">
                                            <input type="radio" v-model="formData.roleKey" value="student" name="optradio">
                                            <span class="checkmark"></span> 学生
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label">密码</label>
                                    <div class="pass-group">
                                        <input :type="showPass?'text': 'password'" v-model="formData.password" class="form-control pass-input" placeholder="请输入密码">
                                        <span @click="showPass=!showPass" class="toggle-password" :class="showPass ? 'feather-eye-off' : 'feather-eye'"></span>
                                    </div>
                                </div>
                                <div class="forgot">
                                    <span><a class="forgot-link" href="#">忘记密码?</a></span>
                                </div>
                                <div class="remember-me">
                                    <label class="custom_check mr-2 mb-0 d-inline-flex remember-me"> 记住我
                                        <input type="checkbox" name="radio">
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                                <div class="d-grid">
                                    <button class="btn btn-primary btn-start" type="submit">登录</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="google-bg text-center">
                        
                        <p class="mb-0">@copyright 2024 10code</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
const router = useRouter()
const userInfo = useUseInfo()
definePageMeta({
    layout: false,
    template: ''
})
// 是否显示密码
const showPass = ref(false)
 
const formData = reactive({
    telephone: '15100000000',
    // name: 'admin',
    password: 'abcd1234',
    roleKey: 'admin',
    remember: false
})
 
const hLogin = async () => {
    try {
        const res = await userApi.login(formData)
        const {tokenString}  = res
        userInfo.value.tokenString = tokenString
        if(formData.roleKey === 'admin'){
            userInfo.value.user = {type:'admin', ...res.admin}
            router.push('/admin')
        } else if(formData.roleKey === 'principal'){
            userInfo.value.user = {type:'master', ...res.principal}
            router.push('/master')
        } else if(formData.roleKey === 'teacher'){
            userInfo.value.user = {type:'teacher', ...res.teacher}
            router.push('/teacher')
        } 
    } catch(error){
        alert(error)
        // console.info(error)
        // alert(error.message)
    }
}

useHead({ 
    title: '登录',
    meta: [
        { name: 'description', content: 'Login' }
    ],
    script: [
        { src: '/js/owl.carousel.min.js', body: true }
    ]
})

onMounted(() => {
    const f = () => {
        if ($('.owl-carousel.login-slide').length > 0) {
            var owl = $('.owl-carousel.login-slide');
            if(!owl.owlCarousel)
                return
            owl.owlCarousel({
                margin: 24,
                nav: false,
                nav: true,
                loop: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    768: {
                        items: 1
                    },
                    1170: {
                        items: 1
                    }
                }
            });
        }
    }
    setTimeout(f, 100)
})
</script>

<style>
.login-wrapper .loginbox label {
    width: 100px;
}
</style>
